<!--
 * @Author: @zhangrui-1997 17805271997@163.com
 * @Date: 2023-08-10 16:02:30
 * @LastEditors: giteezr 2250368646@qq.com
 * @LastEditTime: 2023-12-28 09:21:41
 * @FilePath: \vue3-ts\src\views\bus\components\echarts\BarGraph.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div ref="RadarEcharts" class="RadarEcharts" :style="style"></div>
</template>
  
  <script setup lang="ts">
import * as echarts from "echarts";
import { ref, reactive, watch, nextTick } from "vue";
// 接收值
let props = defineProps({
  dataSource: {
    type: Object,
    default: false,
  },
});

// 定义值
let RadarEcharts = ref(); //ref的应用
let style = reactive({
  width: "100%",
  height: "100%",
});

// 定义加载函数
let initCharts = () => {
  let chart = echarts.init(RadarEcharts.value);

  let option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      textStyle: {
        fontSize: 12,
        color: "#fff", //设置文字颜色
      },
      backgroundColor: "#061436", // 背景
      padding: [8, 10], //内边距
      extraCssText: "box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);", //添加阴影
    },
    radar: [
      {
        indicator: props.dataSource.indicator,
        textStyle: {
          color: "red",
        },
        center: ["50%", "50%"],
        radius: "70%",
        startAngle: 90,
        splitNumber: 4,
        shape: "circle",

        name: {
          padding: -5,
          formatter: "{value}",
          textStyle: {
            color: "rgba(255,255,255,.5)",
          },
        },
        splitArea: {
          areaStyle: {
            color: "rgba(255,255,255,.05)",
          },
        },
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.05)",
          },
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.05)",
          },
        },
      },
    ],
    series: [
      {
        name: "雷达图",
        type: "radar",
        tooltip: {
          trigger: "item",
        },
        data: [
          {
            name: "历史事件类型",
            value:  props.dataSource.data,
            lineStyle: {
              normal: {
                color: "#37a2da",
                width: 2,
              },
            },
            areaStyle: {
              normal: {
                color: "#37a2da",
                opacity: 0.4,
              },
            },
            symbolSize: 0,
          },
        ],
      },
    ],
  };
  chart.setOption(option, true);
  // 当窗口大小改变时候，echarts重置大小
  window.addEventListener("resize", () => {
    chart.resize();
  });
};

// 监听当配置项发生变化的时候，调用加载函数
watch(
  () => props.dataSource,
  (val) => {
    if (Object.keys(val)) {
      nextTick(() => {
        initCharts();
      });
    }
  },
  { immediate: true }
);
</script>
  
  <style lang="less" scoped></style>
  